<template>
	<view class="page">
		<view :style="'margin-top:90rpx'" class="content">
			<view class="top-img">
				<swiper autoplay="true" interval="8000" style="height: 500rpx;">
					<swiper-item v-for="(item, index) in info.swiperImages" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="info-block block">
				<view class="name">{{info.title||''}}</view>
				<view class="describe">{{info.account}}</view>
			</view>
			<view class="white-block block" v-if="info.phone">
				<view class="info-item">
					<image class="iconfont1" src="@/static/image/call-phone.png"></image>
					<view class="info-value">{{info.phone||'暂无联系方式'}}</view>
					
				</view>
				<view class="info-item">
					<image class="iconfont1" src="@/static/image/address.png"></image>
					<view class="info-value">{{info.address||'暂无位置'}}</view>
					<view class="operate-btn" @click="openLocation">导航</view>
				</view>
			</view>
			<view class="white-block block">
				<view class="block-title FZHZGBJ">简介</view>
				<view class="content">
					<template v-if="info.introduction&&info.introduction.length>0">
						<mp-html :content="info.introduction"></mp-html>
					</template>
					<view v-else class="empty">暂无简介</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				info: {
					title: '',
					swiperList: [],
					account: '',
					phone: '',
					latitude: 39.425904,
					longitude: 98.780061,
					address: '',
				}
			}
		},
		methods: {
			openLocation() {
				if (!this.info.latitude || !this.info.longitude) {
					uni.showToast({
						title: '暂无位置信息',
						icon: 'none'
					});
					return;
				}
				// 使用腾讯地图H5导航
				const url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${this.info.title}&tocoord=${this.info.latitude},${this.info.longitude}&referer=myapp`;
				window.location.href = url;
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			// 监听 'acceptData' 事件
			eventChannel.on('acceptData', (data) => {
				this.info = data.data; // 获取传递的数据
			});
		},
		onUnload() {
			this.eventChannel.off('acceptData');
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #4a8dff, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;

		.content {
			width: $content-width;
			margin: 0 auto;

			.top-img {
				width: 100%;
				height: 100%;


				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.block {
				background-color: #fff;
				margin-bottom: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
			}

			.info-block {
				margin-top: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.describe {
					font-size: 30rpx;
					line-height: 55rpx;
				}
			}

			.white-block {
				.info-item {
					border-bottom: 1px solid #efefef;
					height: 140rpx;
					display: flex;
					align-items: center;

					.info-value {
						width: calc(100% - 230rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.iconfont1 {
						width: 35rpx;
						height: 35rpx;
						margin-right: 20rpx;
					}

					.iconfont {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.operate-btn {
						width: 170rpx;
						border-radius: 20px;
						border: 1px solid $theme-color;
						height: 65rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $theme-color;
					}
				}

				.info-item:last-child {
					border-bottom: none;
				}

				.block-title {
					margin-bottom: 20rpx;
				}

				.content {
					line-height: 1.6;
					text-align: justify;
				}
			}
		}
	}
</style>